<template>
    <div>
        <ChatNav></ChatNav>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm" size="medium">

            <el-form-item label="聊天室封面" prop="chatCover">
                <el-upload class="uploadPic" action="#" :before-upload="beforeUploadPic" :show-file-list="false" drag>
                    <img v-if="ruleForm.chatCover" :src="downloadUrl + ruleForm.chatCover" class="avatar">
                    <el-button v-else class="uploadButton" type="primary" size="medium">上传封面</el-button>
                </el-upload>
            </el-form-item>

            <el-form-item label="聊天室标题" prop="chatTitle" class="chatTitle">
                <el-input v-model="ruleForm.chatTitle" placeholder="【聊天室类型】+ 主要标题"></el-input>
            </el-form-item>

            <el-form-item label="聊天室简介" prop="chatIntroduction">
                <el-input type="textarea" v-model="ruleForm.chatIntroduction"
                    placeholder="填写更全面的相关信息，让更多的人能找到你的聊天室吧"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                    v-if="!this.$route.query.keyword">创建聊天室</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button type="primary" @click="updateChat('ruleForm')" v-if="this.$route.query.keyword">更新聊天室</el-button>
                <el-button type="danger" @click="deleteChat('ruleForm')" v-if="this.$route.query.keyword">删除聊天室</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script>
import { uploadPic } from "@/api/tool/file";
import { getChatDetail, addChat, updateChat, deleteChat } from "@/api/other/chat";

import ChatNav from "@/views/chat/ChatNav";

import Bus from "@/utils/bus";

export default {
    name: "PublishChat",
    components: {
        ChatNav,
    },
    data() {
        return {
            formData: {
                file: "",
                type: "",
            },
            downloadUrl: process.env.VUE_APP_DOWNLOAD_URL,
            ruleForm: {
                chatCover: '',
                chatTitle: '',
                chatIntroduction: '',
            },
            rules: {
                chatCover: [
                    { required: true, message: '请上传聊天室封面', trigger: 'change' }
                ],
                chatTitle: [
                    { required: true, message: '请填写聊天室标题', trigger: 'blur' },
                    { max: 80, message: '长度不超过 80 个字符', trigger: 'blur' }
                ],
                chatIntroduction: [
                    { max: 250, message: '长度不超过 250 个字符', trigger: 'blur' }
                ],
            },
        }
    },

    created() {
        this.getChatDetail();
    },
    methods: {
        // 若是群管理，查询群信息
        async getChatDetail() {
            if (this.$route.query.keyword) {
                const { data: res } = await getChatDetail(this.$route.query.keyword);
                this.ruleForm = res.data;
            }
        },
        // 创建聊天室
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    addChat(this.ruleForm).then((res) => {
                        if (res.data.code === "0") {
                            this.$message.success("创建聊天室成功！");
                            // 延迟1秒钟跳转
                            setTimeout(() => {
                                this.$router.push(`/o/chat/ChatList`);
                            }, 1000);
                        } else {
                            this.$message.error("创建聊天室失败！" + res.data.msg);
                            return false;
                        }
                    });
                } else {
                    this.$message.warning("请完善聊天室信息");
                    return false;
                }
            });
        },
        // 更新聊天室
        updateChat(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    updateChat(this.ruleForm).then((res) => {
                        if (res.data.code === "0") {
                            this.$message.success("更新聊天室成功！");
                            // 延迟1秒钟跳转
                            setTimeout(() => {
                                this.$router.push(`/o/chat/ChatList`);
                            }, 1000);
                        } else {
                            this.$message.error("更新聊天室失败！" + res.data.msg);
                            return false;
                        }
                    });
                } else {
                    this.$message.warning("请完善聊天室信息！");
                    return false;
                }
            });
        },
        // 创建聊天室
        deleteChat() {
            if (this.$route.query.keyword) {
                deleteChat(this.$route.query.keyword).then((res) => {
                    if (res.data.code === "0") {
                        this.$message.success("删除聊天室成功！");
                        // 延迟1秒钟跳转
                        setTimeout(() => {
                            this.$router.push(`/o/chat/ChatList`);
                        }, 1000);
                    } else {
                        this.$message.error("删除聊天室失败！" + res.data.msg);
                        return false;
                    }
                });
            }
        },
        // 重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            Bus.$emit("resetForm", 1);
        },

        // 文件上传之前,el-upload自动触发
        beforeUploadPic(file) {
            if (file.size > 10 * 1024 * 1024) {
                this.$message.warning("封面大小不能超过10M");
                return 0;
            }
            if (file.type.indexOf("image/") == -1) {
                this.$message.warning('文件格式错误！请上传图片类型,如：.jpg .png .jpeg .gif 后缀的文件!');
                return 0;
            }
            let form = new FormData();
            form.append("file", file);
            form.append("type", 1);
            uploadPic(form).then((res) => {
                this.ruleForm.chatCover = res.data.data;
            });
        },
    },
}

</script>
  
<style scoped>
.ruleForm {
    margin-top: 50px;
    margin-left: 120px;
    width: 800px;
    border: 2px solid rgba(105, 105, 105, 0.2);
}

.chatTitle {
    width: 650px;
}

.avatar {
    width: 300px;
}

.el-icon-plus {
    margin-top: 80px;
}

.uploadButton {
    line-height: 30px;
    position: absolute;
    top: 40%;
    left: 35%;
}
</style>